<template>
	<view class="classlist">
		<!-- 获取数据前加载 -->
		<view class="more" v-if="isLoading">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content">
			<navigator :url="`/pages/preview/preview?id=${item._id}&classId=${classId.classid}`" class="item" v-for="item in saveWallList" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill" @click="saveStore(item._id)"></image>
			</navigator>
		</view>
		<!-- 下拉获取数据前加载 -->
		<view class="more" v-if="isLoading" style="padding-bottom: env(safe-area-inset-bottom)">
			<uni-load-more status="more" v-if="isLoading && isLoad"></uni-load-more>
		</view>
		<uni-load-more v-if="!isLoad &&!isLoading" status="noMore" style="padding-bottom: env(safe-area-inset-bottom)"></uni-load-more>
	</view>
</template>

<script setup>
	import {onLoad,onReachBottom} from "@dcloudio/uni-app";
	import {getWallList,downFen} from '@/api/api.js'
	// 引入pinia仓库
	import { useImgStore } from '/store/modules/img.js'
	// classid
	import {ref} from "vue"
	let classId = ref({})
	let pageNum = ref(1)
	// 存储壁纸
	let saveWallList = ref([])
	// 存储壁纸总数
	let wallTotal = ref(0)
	// let 是否加载
	let isLoading = ref(true)
	// 是否正在加载中
	let isLoad = ref(false)
	// 创建仓库实例
	let imgStore = useImgStore()
	
onLoad(async(e)=>{
	let param = e.name=="我的下载"?"download":"score";
	console.log(param);
	classId.value.classid = e.classid
	uni.setNavigationBarTitle({
		title:e.name
	});
	let res = await downFen(param);
	if(res.errCode ==0){
		saveWallList.value =res.data
	}
	console.log(saveWallList.value)
	
	// wallList()
})
// 触底
onReachBottom(()=>{
	pageNum.value++;
	if(saveWallList.value.length == wallTotal.value){
		isLoad.value = false;
		return;
	}
	isLoading.value = true;
	wallList()
})

// 获取
const wallList =async()=>{
	let result = await getWallList(classId.value.classid,pageNum.value);
	if(result.errCode ==0){
		saveWallList.value = [...saveWallList.value,...result.data];
		wallTotal.value = result.total
		isLoading.value =false
		isLoad.value = true
	}
}
const saveStore = (id)=>{
	imgStore.saveImgList = saveWallList.value;
	imgStore.id = id
	
}

</script>

<style lang="scss" scoped>
.classlist{
	.content{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap:5rpx;
		padding:5rpx;
		.item{
			height: 440rpx;
			image{
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}
}
</style>
